<template>
  <div>
    <el-card class="box-card" shadow="always">
      <div style="width: 100%; text-align: center">
        <el-form inline @submit.native.prevent="search" style="aligin: center">
          <el-form-item>
            <el-input
              v-model="searchForm.queryConditions"
              clearable
              placeholder="产品名/描述信息"
              prefix-icon="el-icon-search"
              size="medium"
            />
          </el-form-item>
          <el-form-item>
            <el-button native-type="submit" size="medium" type="primary">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 该div是循环卡片列表 -->
      <div style="width: 100%">
        <div style="margin-left: 10%">
          <el-row v-loading="qualificationLoading">
            <el-col
              :span="4"
              v-for="item in tabledata"
              :key="item.product.id"
              :offset="1"
            >
              <div style="margin-top: 15px">
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <img :src="item.product.imageUrl" class="image" />
                  <div>
                    <span>{{ item.product.productName }}</span>
                    <!-- <div class="bottom clearfix"> -->
                    <el-tooltip
                      content="查看详情"
                      placement="top"
                      style="float: right; margin: 3px"
                    >
                      <el-button
                        type="success"
                        size="mini"
                        icon="el-icon-search"
                        circle
                        @click="showDialog(item)"
                      />
                    </el-tooltip>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="margin-left: 35%; margin-top: 3%">
          <!-- 该div是做分页的 -->
          <div class="block">
            <el-pagination
              :current-page="paging.current"
              :page-sizes="paging.pageSizes"
              :page-size="paging.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>

      <Dialog
        :visible="productInfoVisible"
        :data="productInfo"
        @cancel="cancel"
      />
    </el-card>
  </div>
</template>

<script>
import { getAllQualificationsHasOwned } from "@/api/qualification";
import Dialog from "./components/Dialog";
export default {
  name: "QualificationOwn",
  components: { Dialog },
  data() {
    return {
      //循环卡片列表的数据源
      tabledata: null,
      // 查询条件
      searchForm: {
        queryConditions: "",
      },
      paging: {
        total: 0,
        current: 1,
        pageSizes: [8, 12, 16],
        size: 8,
      },
      qualificationLoading: false,
      productInfoVisible: false,
      productInfo: {},
    };
  },
  created() {
    this.qualificationLoading = true;
    this.getData();
  },
  methods: {
    search() {
      this.paging.current = 1;
      this.qualificationLoading = true;
      this.getData();
    },
    // 获取所有数据
    getData() {
      const form = {
        ...this.searchForm,
        supplierId: this.$store.getters.accountId,
        page: this.paging.current,
        pageSize: this.paging.size,
      };
      getAllQualificationsHasOwned(form)
        .then((res) => {
          if (res.code === 200) {
            this.tabledata = res.data.qualificationInfos;
            this.paging.total = res.data.totalCount;
            this.qualificationLoading = false;
          }
        })
        .catch((err) => {
          // 如果没有数据就显示为空
          this.tabledata = [];
          // 返还每页显示的条数
          //this.paging.size = res.data.size;
          this.paging.total = 0;
          this.qualificationLoading = false;
        });
    },
    showDialog(row) {
      console.log("@@@@@", row);
      this.productInfoVisible = true;
      this.productInfo = row;
    },
    cancel() {
      this.productInfoVisible = false;
    },
    handleSizeChange(val) {
      this.paging.current = 1;
      this.paging.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.getData();
    },
  },
};
</script>


<style scoped>
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 150px;
  height: 150px;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
